import React from 'react'
import PropTypes from 'prop-types'
import { Top10Wrap, SubTitle } from './StyledCookBook'

// export default class Top10 extends Component {
//   render() {
//     return (
//       <Top10Wrap>
//         <h1>精选菜品</h1>
//         <ul>
//           <li>
//             <div><img src="https://i3.meishichina.com/attachment/recipe/2015/01/21/c640_201501211421826764156.jpg?x-oss-process=style/c180" alt=""/></div>
//             <div>
//               <h3>西芹泡椒爆鱿鱼</h3>
//               <p><span>23449浏览</span><span>829收藏</span></p>
//             </div>
//           </li>
//           <li>
//             <div><img src="https://i3.meishichina.com/attachment/recipe/2015/01/21/c640_201501211421826764156.jpg?x-oss-process=style/c180" alt=""/></div>
//             <div>
//               <h3>西芹泡椒爆鱿鱼</h3>
//               <p><span>23449浏览</span><span>829收藏</span></p>
//             </div>
//           </li>
//           <li>
//             <div><img src="https://i3.meishichina.com/attachment/recipe/2015/01/21/c640_201501211421826764156.jpg?x-oss-process=style/c180" alt=""/></div>
//             <div>
//               <h3>西芹泡椒爆鱿鱼</h3>
//               <p><span>23449浏览</span><span>829收藏</span></p>
//             </div>
//           </li>
//         </ul>
//       </Top10Wrap>
//     )
//   }
// }

const Top10 = (props) => {
  return (
    <Top10Wrap>
      <h1>精选菜品</h1>
      <ul>
        {
          props.list.size > 0 && props.list.map(value => {
            return (
              <li key={value.id} onClick={props.onGoToDetail(value.name)}>
                <div><img src={value.img} alt=""/></div>
                <div>
                  <h3>{value.name}</h3>
                  <SubTitle lc={1}><span>{value.all_click}浏览</span><span>{value.favorites}收藏</span></SubTitle>
                </div>
              </li>
            )
          })
        }
      </ul>
    </Top10Wrap>
  )
}
// Top10.prototypes = {
//   list: PropTypes.array
// }
Top10.propTypes = {
  list: PropTypes.object
}
export default Top10 